<template>
  <div class="popoverbtn">
    <el-popover placement="bottom" width="150" trigger="hover" :disabled="disable">
      <el-checkbox-group v-model="checked" @change="change1">
        <el-checkbox
          style="display: block"
          v-for="item in options"
          :label="item.label"
          :key="item.key"
        >{{ item.label }}
        </el-checkbox
        >
      </el-checkbox-group>
      <el-button slot="reference" type="text"
      ><span style="color: #000000"><img src="~@/assets/img/xiala.png"/></span
      ></el-button>
    </el-popover>
  </div>
</template>
<script>
export default {
  props: {
    checkedProps: {
      type: Array,
      default: []
    },
    options: {
      type: Array,
      default: [{
        label: '我的',
        key: '1'
      }]
    }
  },
  data() {
    return {
      checked: [],
      disable: false
    }
  },
  watch: {
    // checked (val) {
    //   this.checked = this.checkedProps
    // }
  },
  methods: {
    change1(w) {
      this.$emit('getCheckeds', w)
    }
  },

  mounted() {
    this.checked = this.checkedProps
  }
}
</script>
<style lang="scss">
.el-checkbox {
  margin-left: 10px;
}
.popoverbtn {
  .el-popover__reference-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

</style>
